<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>登录页面</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
  <script type="text/javascript" src="js/bootstrap.js" ></script>
  <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container" style="width: 200px;margin-top: 150px " >
  <div style="margin-left:40px">
    <h1>请登录</h1>
    <p style="margin-left: 20px;color: #4cae4c">${msg}</p>
  </div>
  <form role="form" class="form-horizontal" action="${pageContext.request.contextPath}/login" method="post" id="form">
    <div class="form-group">
      <label >用户名</label>
      <p id="queMessage"></p>
      <input class="form-control" name="username" id="username"/>
    </div>
    <div class="form-group">
      <p id="pueMessage"></p>
      <label >密码</label>
      <input class="form-control" type="password" name="password" id="password"/>
    </div>
    <div class="form-group">
      <input class="form-control btn btn-success" type="submit" value="登录">
    </div>
    <div class="form-group">
       <a class="btn btn-info" style="width: 200px" href="register.jsp">注册</a>
    </div>
  </form>
</div>
</body>
</html>
<script>
  $(function () {
    $("#username").blur(function () {
      checkUsername();
      // test();
      jqueryJson();
    })
    $("#password").blur(function () {
      checkPassword();
    })
    $("#form").submit(function () {
      return checkUsername()&&checkPassword();
    })
    json();
  })
  function checkUsername() {
    let username = $("#username").val();
    let msg = $("#queMessage");
    if (username == null || username == ""){
      msg.html("用户名不能为空").css("color","red").css("font-size","12px");
      return false;
    }else if (username.length<4){
      msg.html("用户名长度不能小于4").css("color","red").css("font-size","12px");
    }
    else {
      msg.html("格式正确").css("color","green").css("font-size","12px");
      return true;
    }
  }
  function checkPassword() {
    let password = $("#password").val();
    let msg = $("#pueMessage");
    if (password == null || password == ""){
      msg.html("密码不能为空").css("color","red").css("font-size","12px");
      return false;
    }else if (password.length<6){
      msg.html("用户名长度不能小于6").css("color","red").css("font-size","12px");
    }else {
      msg.html("格式正确").css("color","green").css("font-size","12px");
      return true;
    }
  }
  function test() {
    let xmlHttp;
    //1.创建对象
    if (window.XMLHttpRequest){
      xmlHttp = new XMLHttpRequest();
    }else if (window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XML")
    }
    let username = document.getElementById("username").value;
    //2.打开链接
    xmlHttp.open("get","${pageContext.request.contextPath}/testuname?username="+username,true);
    //3.返回回调函数
    xmlHttp.onreadystatechange = function () {
      //3.1判断状态
      if(xmlHttp.readyState==4){
        //3.2 接收返回的数据
        let responseText = xmlHttp.responseText;
        document.getElementById("queMessage").innerText = responseText;
      }
    }
    //4.发送数据
    xmlHttp.send();
  }
  function jqueryTest() {
    let username = $("#username").val();
    $.ajax({
      url:"${pageContext.request.contextPath}/testuname",
      data:"username="+username,
      type:"get",
      dataType:"text",
      success:function (rs) {
        console.log(rs);
        $("#queMessage").html(rs).css("color","green").css("font-size","12px");
      }
    });
    // $.get()
/*    $.get("${pageContext.request.contextPath}/testuname","username="+username,function (rs) {
      console.log(rs);
      $("#queMessage").html(rs);
    });*/
/*    $.post("${pageContext.request.contextPath}/testuname","username="+username,function (rs) {
      console.log(rs);
      $("#queMessage").html(rs);
    });*/
  }
  function json(){
    let j1 = {
      "name":"张三",
      "age":18
    }
    let j2 = {
      "names":["aa","vv","dd"]
    }
    console.log(j2.names[0]);
    let j3 = {
      "users":[
        {
          "name":"张1",
          "age":18
        },{
          "name":"张2",
          "age":16
        },{
          "name":"张3",
          "age":19
        }
      ]}
    console.log(j3.users[0].name);
  }
  function jqueryJson(){
    let username = $("#username").val();
    $.ajax({
      url:"${pageContext.request.contextPath}/testuname",
      data:"username="+username,
      type:"post",
      //返回的数据格式
      dataType:"json",
      success:function (data) {
        $("#password").val(data.password);
      }
    })
  }
</script>